<!--suppress ALL-->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <th:block th:replace="fragments/head :: public-css"/>
    <th:block th:replace="fragments/head :: ztree-css"/>
</head>

<body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed layout-footer-fixed">
<!-- Site wrapper  -->
<div class="wrapper">

    <!-- 头部区域 Navbar -->
    <th:block th:replace="fragments/main-header"/>
    <!-- /.navbar -->

    <!-- 左侧区域 Main Sidebar Container -->
    <th:block th:replace="fragments/main-sidebar(activeUrl= '/category')"/>

    <!-- 右侧主区域 Content Wrapper. Contains page content -->
    <div class="content-wrapper  text-sm">
        <!-- 右侧导航区域 Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>编辑分类</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">分类列表</a></li>
                            <li class="breadcrumb-item active">编辑分类</li>
                        </ol>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">

                    <!-- tree树展示权限资源 -->
                    <div class="col-md-3">
                        <!-- general form elements -->
                        <div class="card card-primary">
                            <div class="card-header">
                                <h3 class="card-title">分类详情</h3>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body">
                                <div class="form-group">
                                    <label class="col-form-label">选择上级分类：</label>
                                    <button  class="btn btn-info btn-sm" onclick="parentPermission()" >根菜单</button>
                                    <div >
                                        <ul class="ztree" style="overflow: auto;" id="permissionTree"></ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- / tree树展示权限资源 -->

                    <div class="col-md-9">
                        <!-- general form elements -->
                        <div class="card card-primary">
                            <div class="card-header">
                                <h3 class="card-title">基本信息</h3>
                            </div>
                            <!-- /.card-header -->
                            <form id="form" th:action="@{/category/saveOrUpdate}" th:method="post"  th:object="${category}">
                                <input name="_method" th:if="*{id != null}" value="put" type="hidden" >
                                <input th:value="*{id}" id="id" name="id" type="hidden" >
                                <div class="card-body ml-4">
                                    <div class="row ">
                                        <div class="col-sm-6">
                                            <div class="form-group row">
                                                <label class="col-sm-3  col-form-label"><span style="color: red;">*</span>上级分类：</label>
                                                <div>
                                                    <input id="pid" th:value="*{pid}" name="pid" type="hidden">
                                                    <input id="parentName" th:value="*{parentName}" name="parentName" type="text" placeholder="请在右侧选择上级" class="form-control" readonly  >
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group row">
                                                <label class="col-sm-3  col-form-label"><span style="color: red;">*</span>分类名称：</label>
                                                <div>
                                                    <input th:value="*{name}" name="name" type="text"  maxlength="40" class="form-control" placeholder="请输入分类名称" required>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row ">
                                        <div class="col-sm-6">
                                            <div class="form-group row">
                                                <label class="col-sm-3 col-form-label">分类介绍：</label>
                                                <div>
                                                    <input th:value="*{description}"}  type="text" name="description" maxlength="500" class="form-control" placeholder="请输入分类介绍" >
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-sm-6">
                                            <div class="form-group row">
                                                <label class="col-sm-3 col-form-label">图标：</label>
                                                <div>
                                                    <input th:value="*{icon}"  type="text" name="icon" maxlength="100" class="form-control" placeholder="请输入图标" >
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row ">
                                        <div class="col-sm-6">
                                            <div class="form-group row">
                                                <label class="col-sm-3 col-form-label">是否可用：</label>
                                                <div class="col-sm-9 form-inline">
                                                    <div class="form-check">
                                                        <input th:field="*{status}" value="1"  name="status" type="radio" class="form-check-input " id="type1" checked>
                                                        <label class="form-check-label ">可用&nbsp;</label>
                                                    </div>
                                                    <div class="form-check">
                                                        <input th:field="*{status}" value="0" name="status" type="radio" class="form-check-input " id="type2" checked>
                                                        <label class="form-check-label ">不可用&nbsp;</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group row">
                                                <label class="col-sm-3 col-form-label">排序：</label>
                                                <div>
                                                    <input th:value="*{sort}" type="number" name="sort" maxlength="40" class="form-control" placeholder="请输入排序" >
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div> <!-- /.card-body -->

                                <div class="card-footer text-center">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fa fa-check"></i>&nbsp;提交
                                    </button>
                                    <button type="button" th:onclick="location.href=[[@{/category}]]" class="btn btn-default">
                                        <i class="fa fa-reply-all"></i>&nbsp;返回
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- /.row -->
            </div><!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>

    <!--右底部区域-->
    <th:block th:replace="fragments/main-footer"/>

    <!-- 右上角工具栏 Control Sidebar -->
    <th:block th:replace="fragments/control-sidebar"/>
</div>
<!-- ./wrapper -->

<th:block th:replace="fragments/script :: public-js"/>
<th:block th:replace="fragments/script :: inputmask-js"/>
<th:block th:replace="fragments/script :: ztree-js"/>
<th:block th:replace="fragments/script :: layer-js"/>
<script th:src="@{/modules/js/category/category-form.js}"></script>
</body>
</html>
